<template>
  <div class="relative bg-[#eee]">
    <div class="min-h-50vh px-1rem py-0.5rem">
      <div class="bg-white rounded-0.5rem px-1rem py-0.5rem mb-1rem">
        <em></em>
        <span class="font-bold">请选择您要开通的模块</span>
      </div>
      <van-checkbox-group v-model="checked" ref="checkboxGroup" shape="square" @change="countPrice">
        <div
          class="bg-white rounded-0.5rem px-1rem py-0.5rem mb-1rem"
          v-for="item in moduleList"
          :key="item.id"
        >
          <div class="border px-1rem py-0.5rem">
            <div class="flex items-center">
              <van-checkbox :name="item.id"></van-checkbox>
              <div class="flex ml-1rem flex-1 h-1rem items-center">
                <div class="flex justify-between w-full text-0.8rem">
                  <span class="font-bold">{{ item.name }}</span>
                  <span>持续天数：{{ item.expireDay }}天</span>
                </div>
              </div>
            </div>
            <div class="flex items-end mt-1rem">
              <span class="text-0.8rem">
                <span>现价:</span>
                <span class="text-price_red text-1.25rem">￥{{ item.price }}</span>
              </span>
              <span class="text-0.8rem ml-1rem">
                <span>原价:</span>
                <span>
                  <span class="line-through">￥{{ item.originalPrice }}</span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <div class="sticky bottom-0 left-0 bg-white">
      <div class="flex flex-col w-100vw px-1rem py-0.5rem">
        <div class="flex mb-0.5rem">
          <span class="text-0.8rem text-primary">已选择{{ checked.length }}个模块</span>
        </div>
        <van-button type="danger" :disabled="checked.length === 0 || counting" @click="toPay">
          <span v-show="checked.length === 0">立即支付</span>
          <span v-show="checked.length !== 0 && counting">计算价格中...</span>
          <span v-show="checked.length !== 0 && !counting"
            >立即支付<span class="ml-0.5rem">{{
              totalMoney ? padZeroPrice(totalMoney) : '0.00'
            }}</span></span
          >
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useConfigStore } from '@/stores/config'
import { onActivated, ref } from 'vue'
import { CalculateOrderPrice, postModuleOrderCreate } from '@/api/order'
import { padZeroPrice } from '@/utils/price'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const config = useConfigStore()
const moduleList = ref([])
const checked = ref([])
const checkboxGroup = ref()
const counting = ref(false)
const totalMoney = ref(null)
const result = ref({})

const init = () => {
  config.initModuleList().then((res) => {
    if (res && res.length > 0) {
      moduleList.value = res.filter((item) => item.code !== 'PUBLIC')
      if (route.query?.code) {
        checked.value.push(moduleList.value.find((item) => item.code === route.query.code)?.id)
        countPrice()
      }
    }
  })
}

const countPrice = () => {
  counting.value = true
  const list = moduleList.value.filter((item) => checked.value.includes(item.id))
  CalculateOrderPrice({
    buyModuleOrder: {
      discoun: null,
      id: null,
      memberId: null,
      memberName: null,
      payDate: null,
      payMoney: 0,
      payStatus: 0,
      payType: 0,
      preMoney: 0,
      totalMoney: 0,
      transactionId: null,
      updateDate: null,
    },
    discoun: null,
    payMoney: 0,
    preMoney: 0,
    totalMoney: 0,
    buyModuleOrderItemList: list.map((item) => {
      return {
        moduleId: item.id,
        moduleName: item.name,
        payMoney: 0,
        totalMoney: item.originalPrice,
      }
    }),
  })
    .then((res) => {
      if (res.code === 20000) {
        totalMoney.value = res.data.payMoney
        result.value = res.data
      }
    })
    .catch(() => {
      if (result.value.buyModuleOrderItemList && result.value.buyModuleOrderItemList.length > 0) {
        checked.value = []
        result.value.buyModuleOrderItemList.forEach((item) => {
          checked.value.push(item.moduleId)
        })
      }
    })
    .finally(() => {
      counting.value = false
    })
}

const toPay = () => {
  postModuleOrderCreate(result.value).then((res) => {
    if (res.code === 20000) {
      router.push(`/order?id=${res.data}&type=1`)
    }
  })
}

init()

onActivated(() => {
  init()
})
</script>
